<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    history
        // 为ajax提供历史记录，回退操作
        pushState()
        pushState(data,'','#page=1');  为url加一个hash值就可以回退了
        go(-1)   后退一步
        go(1)    前进一步


    cookie
        实际上是后端的技术,前端用来跨页面数据访问
        前端使用cookie跟后端干的事不一样，不过都是通过cookie的特性来造作的
        后端没有任何方法将当前用户状态保存，所以使用cookie来记录当前的用户信息
        cookie必须在服务器环境下才可以运行
        cookie可以把当前域名中的数据保存在浏览器中，换页面时不会丢失
        cookie中不能存中文，所以需要转码再存
        document.cookie  // 读操作
        document.cookie = 1  // 写操作
        document.cookie = 'num=' + num +';expires' + iDate

        设置cookie:
            document.cookie = 1  // 写操作
            document.cookie = 'num=' + num +';expires' + iDate
            cookie的生命周期
                默认情况:
                     在浏览器关闭之前
                expires:
                    设置cookie的生命周期，用下面格式，iDate为使用new Date出来的日期
                    document.cookie = 'num=' + num +';expires' + iDate
            设置cookie封装函数:
                //设置cookie
                function setCookie(key, value, time) {
                    if (time) {
                        var date = new Date;
                        date.setDate(date.getDate() + time);
                        document.cookie = key + '=' + escape(JSON.stringify(value)) + ';expires=' + date;
                    } else {
                        document.cookie = key + '=' + escape(JSON.stringify(value));
                    }
                }
            在以前的浏览器下，cookie的大小是4095字节
            设置的时候：value这个参数使用JSON.stringify()转换一下;
            获取的时候：使用JSON.parse()再转回来;

        获取cookie:
            获取的时候，一次性能获取到当前域名下的所有的cookie
            每个cookie使用; (**分号空格**)来分割的
            获取cookie封装函数:
                //获取cookie
                function getCookie(key) {
                    let str = document.cookie;
                    let arr = str.split('; ');
                    let val = null;
                    for (var i = 0; i < arr.length; i++) {
                        let arr2 = arr[i].split('=');
                        if (arr2[0] == key) {
                            val = unescape(arr2[1]);
                            break;
                        }
                    }
                    if (val) {
                        return val
                    } else {
                        return -1;
                    }
                }

        删除cookie:
            其实就是设置一个时间小于当前
            删除cookie封装函数:
                function removeCookie(key,[value]) {
                    setCookie(key,value,-1);
                }


    localStorage
        H5本地存储,用法和cookie一样,专门给前端设置的数据库
        设置:
            localStorage.setItem();
        获取:
            localStorage.getItem();
        删除:
            localStorage.removeItem()
        生命周期:
            只要不删就一直在
        存储空间:
            5M
        事件:
            storage事件
                能够监听同域用浏览器的**兄弟页面**数据并且实时更新;
                只有手动删除浏览器的数据才会在**当前页面**触发这个事件;


    sessionStorage 与 localStorage
        相同点:
            设置,删除,获取的方法相同,空间大小相同
        不同点:
            生命周期:
                sessionStorage:关闭浏览器就死
                localStorage:只要不删就一直在

</script>
</body>
</html>